'use client';

import React from 'react';
import { AppBar, Toolbar, Typography, Button, IconButton } from '@mui/material';
import { MainMenu, menuData } from '@/app/_data/menu-data';
import Link from 'next/link';
import MenuIcon from '@mui/icons-material/Menu';

interface TopMenuProps {
  onToggleCollapse: () => void;
}

const TopMenu: React.FC<TopMenuProps> = ({ onToggleCollapse }) => {
  return (
    <AppBar position="static">
      <Toolbar sx={{ display: 'flex', gap: 2}}>
        <IconButton
          size="large"
          edge="start"
          color="inherit"
          aria-label="menu"
          sx={{ mr: 2 }}
          onClick={onToggleCollapse}
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" component="div" sx={{ mr: 2 }}>
          数据供应链生态平台
        </Typography>
        {menuData.map((item: MainMenu) => (
          <Button
            key={item.id}
            component={Link}
            href={item.path}
            color="inherit"
            sx={{
              flex: 1,
              '&:hover': {
                backgroundColor: 'rgba(255, 255, 255, 0.15)',
              },
                height: '100%',
            }}
          >
            {item.label}
          </Button>
        ))}
      </Toolbar>
    </AppBar>
  );
};

export default TopMenu;